<template>
  <el-dialog :visible.sync="dialogVisible" width="516px" :show-close='false'>
    <div slot="title" class="dialog-title">批量导入</div>
    <!-- <div class="flex_box_between">
      <span>{{type==1?'导入用户':type==2?'导入简历':type==3?'导入企业':'导入职位'}}</span>
      <el-button type='text' @click="record">导入记录</el-button>
    </div> -->
    <el-button type='text' @click="record" class="import_btn">导入记录</el-button>
    <div class="flex_box import_step">
      <span>第一步：下载模板</span>
      <el-button size="small" type="primary" @click="downExcel">点击下载</el-button>
    </div>
    <div class="flex_box import_step">
      <span>第二步：上传模板</span>
      <el-button :loading="loading" size="small" type="primary" class="btn">
        <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">点击上传
      </el-button>
    </div>
    <p class="file_name" v-if="file">文件名：{{file}}</p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="hide" size='medium'>取 消</el-button>
      <el-button type="primary" @click="importData" size='medium'>确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      baseUrl:process.env.VUE_APP_BASE_API,
      exportUrl:'',// 下载模板url
      importUrl:'',//导入excel
      dialogVisible:false,//  弹框的显示和隐藏
      type:'', // 导入表格入口类型，1 导入用户 2 导入简历 3 企业 4 导入职位
      loading: false,
      file:'' // 需要导入的文件
    }
  },
  methods:{
    // 显示
    show(type) {
      this.type = type
      if(this.type == 1) {
        this.exportUrl = '/user/admin/exportTemp'
        this.importUrl = '/user/admin/import'
      } else if(this.type == 2) {
        this.exportUrl = '/profession/admin/resumeExportTemp'
        this.importUrl = '/profession/admin/resumeImport'
      } else if(this.type == 3) {
        this.exportUrl = ''
        this.importUrl = ''
      } else if(this.type == 4) {
        this.exportUrl = '/profession/admin/postExportTemp'
        this.importUrl = '/profession/admin/postImport'
      }
      this.dialogVisible = true
    },
    // 隐藏弹框
    hide() {
      this.dialogVisible = false
      this.file = ''
    },
    // 下载模板
    downExcel() {
      this.$http.get(this.exportUrl).then(response => {
        if (response.code == 10000) {
          let url  = response.data.file_path
          // window.open(this.baseUrl + url)
          let file_path = response.data.file_path
          const elt = document.createElement('a');
          elt.setAttribute('href', this.baseUrl + url);
          elt.setAttribute('download', file_path);
          elt.style.display = 'none';
          document.body.appendChild(elt);
          elt.click();
          document.body.removeChild(elt);
        }
      })
    },
    // 上传模板
    handleClick(e) {
      this.loading = true
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      if (!rawFile) return
      let form = new FormData();
      form.append('file',rawFile)
      form.append('image','file')
      this.$http.post('/upload/file',form).then(response => {
        if (response.code == 10000) {
          this.file = response.data.path
          this.loading = false
        }
      })
    },
    // 导入到数据库
    importData() {
      let param = {
        file:this.file
      }
      this.$http.post(this.importUrl, param).then(response => {
        if (response.code == 10000) {
          let data = response.data
          let msg = `当前共导入${data.count}条,成功${data.success_count}条，失败${data.fail_count}条`
          this.$message({
            type: 'success',
            message: msg
          })
          this.file = ''
        }
      })
    },
    // 导入记录
    record() {
      this.$router.push({path:'/vip/importRecord',query:{type:this.type}})
    }
  }
}
</script>

<style lang='scss' scoped>
  .import_step{
    margin-bottom:20px;
  }
  .import_step span{
    margin-right: 20px;
    color:#61687C;
    font-size: 14px;
  }
  .import_step button{
    width: 158px;
    // height: 34px;
    // line-height: 34px;
  }
  .btn{
    position: relative;
  }
  .excel-upload-input{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .file_name{
    margin-top: 20px;
  }
  .import_btn{
    position: absolute;
    top:9px;
    right:20px;
    font-size: 14px;
    color:#2193FE;
  }
</style>